
<template>
    <div class="PlaceCascade">
        <div v-if="isDetailAddress">
            <div class="place-cascade-box">
                <FormItem :label="label" :prop="value" class="inline-block">
                    <Cascader
                        :load-data="loadData"
                        :data="location"
                        v-model="form[value]"
                        placeholder="点击选择省市"
                        class="show_cascader_input"
                        :clearable="false"
                        :disabled="isDisabled"
                    ></Cascader>
                </FormItem>
                <FormItem :prop="detailValue" :label-width="0" class="inline-block detailValue">
                    <Tooltip max-width="400px" :content="form[detailValue]">
                    <Input v-model="form[detailValue]" placeholder="请输入详细地址" :readonly="false" class="detail_cascader_input" :disabled="isDisabled" />
                    </Tooltip>
                </FormItem>
            </div>
        </div>
        <div v-else>
            <FormItem :label="label" :prop="value">
                <Cascader
                    :load-data="loadData"
                    :data="location"
                    class="w200"
                    v-model="form[value]"
                    style="padding-top: 4px;"
                    :disabled="isDisabled||isNetLocation"
                ></Cascader>
            </FormItem>
        </div>
    </div>
</template>
<script>
import { getLocation } from "_p/basic/api/contract/common/common";

export default {
    name: "PlaceCascade",
    data() {
        return {
            // location: [],
        };
    },
    props: {
        form: {
            type: Object,
            require: true
        },
        value: {
            // type:String,
            require: true
        },
        detailValue: {
            type: String
        },
        label: {
            type: String,
            require: true
        },
        isDetailAddress: {
            type: Boolean
        },
        location: {
            type: Array
        },
        // 获取地址api
        getLocationFn: {
            type: Function
        },
        isDisabled: {
            type: Boolean
        },
        isNetLocation: {
            type: Boolean
        }
    },
    created() { },
    mounted() { },
    methods: {
        loadData(item, callback) {
            item.loading = true;
            let fn;
            // 有传api就用传进来的api
            this.getLocationFn && typeof this.getLocationFn === "function"
                ? (fn = this.getLocationFn)
                : (fn = getLocation);

            fn({ upperCode: item.value }).then(res => {
                if (res.code === "0000") {
                    res.data.forEach(function (item) {
                        if (item.isParent) {
                            item.loading = false;
                            item.children = [];
                        }
                    });
                    item.children = res.data;
                    item.loading = false;
                    callback();
                }
            });
        }
    }
};
</script>
<style lang="less">
.PlaceCascade {
    .place-cascade-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-flow: row nowrap;
    }
    .ivu-cascader {
        line-height: inherit;
    }
    .cascader_input > input {
        padding-left: 60px;
    }
    .show_cascader_input .ivu-input {
        padding: 0px 10px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-right: none;
    }

    .show_cascader_input .ivu-icon {
        display: none;
    }
    .show_cascader_input .ivu-input:focus,
    .show_cascader_input .ivu-input:hover {
        box-shadow: none;
        border-color: #dcdee2;
    }
    .detail_cascader_input > input {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }
    .dealer {
        z-index: 99;
    }
    .regist {
        z-index: 98;
    }
    .detailValue {
        flex-grow: 2;
        margin-left: -4px;
    }

}
</style>
